<template>
  <div class="editor" style="width: 80%;margin-left: 10%">
    <div id="e" >
    </div>
    <div style="margin-top: 10px">
    <el-button type="primary" @click="submit()">提交</el-button>
    <el-button type="primary" @click="goBack()">取消</el-button>
    </div>
  </div>

</template>

<script>
  import E from "wangeditor"

    export default {
        name: "EditorTwo",
      components:{

      },
      data() {
        return {
          editor:null
        }
      },
      methods:{
          initE()
          {
            this.editor = new E('#e')
            this.editor.config.height = 300
            this.editor.config.placeholder = '输入你的内容'
            this.editor.config.zIndex = 1
            this.editor.config.menus = [
              'head',  // 标题
              'bold',  // 粗体
              'fontSize',  // 字号
              'fontName',  // 字体
              'italic',  // 斜体
              'underline',  // 下划线
              'strikeThrough',  // 删除线
              'foreColor',  // 文字颜色
              'backColor',  // 背景颜色
              // 'link',  // 插入链接
              'list',  // 列表
              'justify',  // 对齐方式
              'quote',  // 引用
              'emoticon',  // 表情
              // 'image',  // 插入图片
              'table',  // 表格
              'code',  // 插入代码
              'undo',  // 撤销
              'redo'  // 重复
            ]
            this.editor.create()
          },
        goBack()
        {
          this.editor.txt.clear()
          this.$router.go(-1)
        },
        submit()
        {
          // this.$emit("submit",this.editor.txt.text())//获取纯文本
          this.$emit("submit",this.editor.txt.html())//获取带样式的文本
        }
      },
      mounted() {
          this.initE();
      }

    }
</script>

<style scoped>

</style>
